<template>
	<view>
		<!-- 一级展开行 -->
		<view v-for="(item,index) in res" :key="index" style="background-color: #fff;margin-top: 20upx;line-height: 100upx;">
			<view style="display: flex;height: 110upx;">
				<view style="flex: 1;">
					<image style="width: 95upx;height: 90upx;margin:10upx 0upx 10upx 20upx;border-radius: 50upx;" :src="item.real_head_img" mode=""></image>
				</view>
				<view style="line-height: 50upx;flex: 2;">
					<text style="font-weight: bold;">{{item.real_name}}</text>
				</view>
				<view style="color: #7D7D7D;flex: 1.5;">
					<text>级别:</text><text style="font-weight: bold;color: #000000;">{{item.level_name}}</text>
				</view>
				
				<switch style="flex: 1;" color="#000" :data-id="item.id" @change="switchChange" />
			</view>
			
			<!-- 二级展开行 -->
			<view v-for="(item2,index) in res2.data" :key="index" style="background-color: #fff;margin-top: 20upx;line-height: 100upx;" v-if="res2.select_user_id == item.id">
				<view style="display: flex;">
					<view style="flex: 1;height: 110upx;">
						<image style="width: 95upx;height: 90upx;margin:10upx 0upx 10upx 20upx;border-radius: 50upx;" :src="item2.real_head_img" mode=""></image>
					</view>
					<view style="line-height: 50upx;flex: 2;">
						<text style="font-weight: bold;">{{item2.real_name}}</text>
					</view>
					<view style="color: #7D7D7D;flex: 1.5;">
						<text>级别:</text><text style="font-weight: bold;color: #000000;">{{item2.level_name}}</text>
					</view>
					<switch style="flex: 1;" color="#000" @change="switchChange1" :data-id="item2.id" />
				</view>
				<!-- 三级展开行 -->
				<view v-for="(item3,index) in res3.data" :key="index" style="background-color: #fff;margin-top: 20upx;line-height: 100upx;" v-if="res3.select_user_id == item2.id">
					<view style="display: flex;">
						<view style="flex: 1;height: 110upx;">
							<image style="width: 95upx;height: 90upx;margin:10upx 0upx 10upx 20upx;border-radius: 50upx;" :src="item3.real_head_img" mode=""></image>
						</view>
						<view style="line-height: 50upx;flex: 2;">
							<text style="font-weight: bold;">{{item3.real_name}}</text>
						</view>
						<view style="color: #7D7D7D;flex: 1.5;">
							<text>级别:</text><text style="font-weight: bold;color: #000000;">{{item3.level_name}}</text>
						</view>
						<switch style="flex: 1;" color="#000" :data-id="item3.id" @change="switchChange2" />
						
					</view>
					<!-- 四级展开行 -->
					<view v-for="(item4,index) in res4.data" :key="index" style="background-color: #fff;margin-top: 20upx;line-height: 100upx;" v-if="res4.select_user_id == item3.id">
						<view style="display: flex;">
							<view style="flex: 1;height: 110upx;">
								<image style="width: 95upx;height: 90upx;margin:10upx 0upx 10upx 20upx;border-radius: 50upx;" :src="item4.real_head_img" mode=""></image>
							</view>
							<view style="line-height: 50upx;flex: 2;">
								<text style="font-weight: bold;">{{item4.real_name}}</text>
							</view>
							<view style="color: #7D7D7D;flex: 1.5;">
								<text>级别:</text><text style="font-weight: bold;color: #000000;">{{item4.level_name}}</text>
							</view>
							<switch style="flex: 1;" color="#000" :data-id="item4.id" />
							
						</view>
						
						
					</view>
					
				</view>
			</view>
			
			
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res: [],
				res2: [],
				res3:[],
				res4:[],
				user_id:'',
				real_name:'',
				real_head_img:'',
				create_time:'',
				check: false,
			}
		},
		onLoad: function() {
			 uni.getStorage({
				 key: 'user_id',
				 success: (res) => {
					this.user_id = res.data
					this.setajax()
				 },
				});
			},
		methods: {
			setajax(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/User/myFriend',
					method: 'POST',
					data: {
						user_id: this.user_id,
						select_user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						console.log(res)
						this.res = res.data.data
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 一级滑块 点开关闭
			switchChange (e) {
				if (e.detail.value) {
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/User/myFriend',
						method: 'POST',
						data: {
							user_id: this.user_id,
							select_user_id: e.currentTarget.dataset.id,
							session_id: uni.getStorageSync("sessionid")
						},
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							if(res.data.code == 999){
								uni.navigateTo({
									url:'/pages/999/999'
								})
							};
							this.res2 = res.data
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.res2 = []
					this.res3 = []
					this.res4 = []
				}
			},
			// 二级滑块 滑块点击
			switchChange1 (e) {
				if (e.detail.value) {
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/User/myFriend',
						method: 'POST',
						data: {
							user_id: this.user_id,
							select_user_id: e.currentTarget.dataset.id,
							session_id: uni.getStorageSync("sessionid")
						},
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							if(res.data.code == 999){
								uni.navigateTo({
									url:'/pages/999/999'
								})
							};
							this.res3 = res.data
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.res3 = []
					this.res4 = []
				}
			},
			// 三级滑块点击
			switchChange2 (e) {
				if (e.detail.value) {
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/User/myFriend',
						method: 'POST',
						data: {
							user_id: this.user_id,
							select_user_id: e.currentTarget.dataset.id,
							session_id: uni.getStorageSync("sessionid")
						},
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							if(res.data.code == 999){
								uni.navigateTo({
									url:'/pages/999/999'
								})
							};
							this.res4 = res.data
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.res4 = []
				}
			},
		}
	}
</script>

<style>

</style>
